<template>
	<div class="wrapPaySuccess">
			<header>
			<img src="../../static/img/back.png" />
			<p>钱包预充值</p>
			<span>完成</span>
			</header>
			<div class="content">
				<span class="warntitle">支付成功后，请前往线下补登机进行补登</span>
				<img class="successImg" src="../../static/img/success.png" />
				<span class="spanSuccess">支付成功！</span>
				<span class="spanMoney">￥100.00</span>
				<ul>
					<li><span class="spanName">商品名称</span><span class="spanContent">钱包预充值</span></li>
					<li><span class="spanName">订单编号</span><span class="spanContent">22222222222</span></li>
					<li><span class="spanName">交易时间</span><span class="spanContent">钱包预充值</span></li>
					<li><span class="spanName">充值卡号</span><span class="spanContent">钱包预充值</span></li>
					<li><span class="spanName">充值金额</span><span class="spanContent">钱包预充值</span></li>
				</ul>
				<button class="searchBtn">查询附近充值点</button>
				<p class="pWarn">
				<span>温馨提示：</span>
				<span>如需发票，请凭充值订单往附近的服务网点领取。</span>
				</p>
			</div>
	</div>
</template>

<script>
			export default{
				data(){
					return{
						
					}
				}
			}
</script>

<style scoped="scoped" lang="less">
.wrapPaySuccess{
	background: #F5F5F5;
	height: 100%;
	width: 100%;
	header{
		position: relative;
		height: 1.48rem;
		background: white;
		img{
			height: 0.66rem;
			margin-top: 0.41rem;
			margin-left: 0.44rem;
		}
		p{
			position: absolute;
			left: 0;
			top: 0;
			width: 60%;
			margin-left: 20%;
			height: 100%;
			text-align: center;
			font-size: 0.6rem;
			line-height: 1.48rem;
		}
		span{
			font-size: 0.42rem;
			color: #55c259;
			float: right;
			height: 100%;
			line-height: 1.48rem;
			margin-right: 0.56rem;
		}
		}
		.content{
			width: 92%;
			margin-left: 4%;
			margin-top: 0.45rem;
			background: white;
			box-sizing: border-box;
			padding-top: 0.36rem;
			padding-bottom: 0.5rem;
		}
		.warntitle{
			width: 86%;
			margin-left: 7%;
			height: 0.82rem;
			background: #f1f3f5;
			display: block;
			border-radius: 0.42rem;
			line-height: 0.82rem;
			text-align: center;
			color: #547fe5;
		}
		.successImg{
			width: 2.2rem;
			margin-top: 0.42rem;
			margin-left: 50%;
			transform: translateX(-50%);
		}
		.spanSuccess{
			display: block;
			text-align: center;
			font-size: 0.5rem;
			color: 3242736;
			margin-top: 0.34rem;
		}
		.spanMoney{
			display: block;
			text-align: center;
			font-size: 0.8rem;
			color:#547fe5 ;
			margin-top: 0.3rem;
		}
		ul{
			box-sizing: border-box;
			padding-left: 0.5rem;
			padding-right: 0.5rem;
			padding-top: 0.32rem;
			font-size: 0.42rem;
			margin-top: 0.2rem;
			border-top: 1px #EEEEEE dashed;
			li{
				display: block;
				height: 0.9rem;
				.spanName{
					float: left;
					color: #979797;
				}
				.spanContent{
					float: right;
					color: #2d2d2d;
				}
			}
		}
		.searchBtn{
			width: 94%;
			margin-left: 3%;
			border-radius: 0.8rem;
			background:#55c259;
			color: white;
			font-size: 0.42rem;
			border: 0 none;
			height: 1.2rem;
			margin-top:0.7rem;
		}
		
		.pWarn{
			margin-top: 0.5rem;
			box-sizing: border-box;
			padding-left: 0.5rem;
			span{
				font-size: 0.4rem;
				color: #b3b3b3;
				display: block;
			}
		}
	}
</style>